import React, { Component } from "react";
import Taro from '@tarojs/taro';
import { View,Image,Text,Button,Input } from '@tarojs/components';
import { AtTabs, AtTabsPane,AtButton, AtModal, AtModalHeader, AtModalContent, AtModalAction} from 'taro-ui';
import './mineyouhuiquan.scss'
class Mineyouhuiquan extends Component {
    constructor () {
        super(...arguments)
        this.state = {
          current: 0,
          isOpen:false,
          listdetail:[]
        }
      }
      handleClick (value) {
        this.setState({
          current: value
        })
      }
      handleClose=()=>{
        this.setState({isOpen:false})
    }
    handleCancel=()=>{
        this.setState({isOpen:false})
    }
    handleConfirm=()=>{
        this.setState({
            isOpen:false
        })
    }
    gotodorddet(){
        Taro.navigateTo({
            url: './../../pages/mineorderdet/mineorderdet'
          })
    }
      componentDidMount() {
        this.getListDetail();
      }
      getListDetail(){
        Taro.request({
          method:"POST",
          url: 'http://123.57.67.148:3000/mock/573/newproduct',
          data: {
            listdetail: 'listdetail',
            bar: 10
          },
          header: {
            'content-type': 'application/json'
          }
        })
          .then(res =>{
            this.setState({
              listdetail:res.data.newproduct
            })
            console.log(res.data)
          })
      }
    render () {
      return <View className='container'>
          <AtTabs
  current={this.state.current}
  scroll
  tabList={[
    { title: '未使用' },
    { title: '已使用' },
    { title: '已过期' }
  ]}
  onClick={this.handleClick.bind(this)}>
    <AtTabsPane current={this.state.current} index={0}>
    <View style='font-size:18px'>
      <View className='at-row youhuiquan'>
        <View className='at-col at-col-3 quanleft'>
          <View>￥ 5</View>
          <View style='font-size:24px;color:gray'>满减券</View>
        </View>
        <View className='at-col at-col-9 quanright'>
        <View>关注5元券</View>
        <View style='font-size:14px;color:gray'>满50可用</View>
        <View style='font-size:14px;color:gray'>2020-11-11 至 2020-12-12</View>
        </View>
      </View>
</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={1}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页二的内容</View>
  </AtTabsPane>
  <AtTabsPane current={this.state.current} index={2}>
    <View style='font-size:18px;text-align:center;height:100px;'>标签页三的内容</View>
  </AtTabsPane>
  
</AtTabs>
<AtButton className='addquan' onClick={()=>this.setState({isOpen:true})}>添加优惠券</AtButton>
<AtModal
  isOpened={this.state.isOpen}
>
<AtModalHeader>添加优惠券</AtModalHeader>
  <AtModalContent>
  序列号：<Input type='text' placeholder='请输入序列号' focus  />
  </AtModalContent>
  <AtModalAction> <Button onClick={ this.handleCancel }>取消</Button> <Button onClick={ this.handleConfirm }>确定</Button> </AtModalAction>
</AtModal>
          </View>
          
    }
  }
  
  export default Mineyouhuiquan